<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
        <title> {{ artist }} | Band Together</title>
        <style type="text/css">
        </style>

        <link rel="Shortcut Icon" href="http://backup.physics.tamu.edu/media/bt.png" type="image/x-icon" >
        <script type="text/javascript" src="utils.js"></script>
		<script type="text/javascript" src="http://backup.physics.tamu.edu/media/jquery.tickertype.js"></script>
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/index.css" >
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/menu.css" >
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/slider.css" >
	
	<!--For location popups-->
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="http://backup.physics.tamu.edu/media/popup.js" type="text/javascript"></script>
	<script type="text/javascript" src="utils.js"></script>
	<link rel="stylesheet" href="http://backup.physics.tamu.edu/media/general.css" type="text/css" media="screen" />
	<!--End of location popups-->
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	// create the cool book gallery effect
	$(function(){
    	//Get our elements for faster access and set overlay width
    	var div = $('div.slider'),
		ul = $('ul.slider'),
		// unordered list's left margin
		ulPadding = 15;

	//Get menu width
    	var divWidth = div.width();

    	//Remove scrollbars
    	div.css({overflow: 'hidden'});

    	//Find last image container
    	var lastLi = ul.find('li:last-child');

    	//When user move mouse over menu
    	div.mousemove(function(e){

	//As images are loaded ul width increases,
	//so we recalculate it each time
	var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

	var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
	div.scrollLeft(left);
	});
	});
	</script>

</head>

<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

	var timeout     = 500;
	var closetimer  = 0;
	var ddmenuitem  = 0;

	function jsddm_open()
	{       jsddm_canceltimer();
        	jsddm_close();
        	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

	function jsddm_close()
	{       if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

	function jsddm_timer()
	{       closetimer = window.setTimeout(jsddm_close, timeout);}

	function jsddm_canceltimer()
	{       if(closetimer)
        	{       window.clearTimeout(closetimer);
                	closetimer = null;}}

	$(document).ready(function()
	{       $('#jsddm > li').bind('mouseover', jsddm_open);
        	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

	document.onclick = jsddm_close;

</script>

<!--change location -->
	<div id="popupContact">
		<p id="contactArea">
			<form action="" method="POST" name="locForm" onsubmit="return checkForm()">
				<label for="id_location">Enter your location:</label>
				<input type="text" name="locField" />
				<input type="submit" value="Submit" name="Submit"></input>
			</form>
		</p>
	</div>
<div id="backgroundPopup"></div>
<!-- done -->

<div class="main">
	<div class="header">
		<img src="http://backup.physics.tamu.edu/media/title.png" alt="Band Together" />
		<div class="slogan">
			<img src="http://backup.physics.tamu.edu/media/connect.png" alt="connect to local music" />
		</div>
		
		<ul id="jsddm">
			<li><a href="http://backup.physics.tamu.edu/bandtogether/">Home</a>
			</li>
			<li><a href="#">Find</a>
				<ul>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/venue/">Venue</a></li>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/artist/">Artists</a></li>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/genre/">Genre</a></li>
				</ul>
       			</li>
            		<li id="button">Change Location</li>
			</li>
			<li id="bar">
				&nbsp;		
			</li>
            	</ul>

	</div>

	<br><br>	

	<h1 style="text-indent:1em;">{{ artist }}</h1>
	<div class="box">	
		<table border="0">
			<tr>
				<td>
					<img alt="{{ artist }}" style=" height: 15em; width: 20em;" src="http://backup.physics.tamu.edu/media/{{ artistPic }}">
				</td>
				<td>
					<div style="padding-left: 2em;">
						<h2>Genre</h2>
					
						{% if artistGenres %}
							{% for artistGenre in artistGenres %}
								{{ artistGenre }},
							{% endfor %}
						{% else %}
						No genres identified for this artist 
						{% endif %}
					
						<h2>Bio</h2>
						{% if artistBio %}
							{{ artistBio }}
						{% else %}
						strawberryJAM began as an impromptu jam-session in April of 2008 at the Barefoot Art Guild in College Station, TX. The lineup grew from there, bringing together musicians from the Texas A&M campus. "When we first started out, there was no practice, no set-list, and no membership. Whoever wanted to get on stage just jumped on, sometimes 13 people at one time, and the jam would go for hours." The free-form performances taught the group how to improvise together and they continued to gain local popularity for high-energy, unpredictable performances. 
						{% endif %}
						
						
					</div>
				</td>
			</tr>
		</table>
		<h2>Upcoming concerts</h2>
		
		Last Concert Cafe<br>
		May 28<br>
		10:00PM<br>
		<!--{% for bandName, bandPic in popularBands %}
		<p style="text-indent:1.1em;"><img alt="{{ bandName }}" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/{{ bandPic }}"></p>
		<p style="text-indent:1.1em;">{{ bandName }}</p>
		{% endfor %}-->
		
		<h2>Stats</h2>
		<table border="0" cellpadding="20px">
			<tr>
				<th>People Following</th>
				<th>Popular Venues</th>
				<th>Popular Areas</th>
				<th>Others artist played with</th>
			</tr>
			<tr>
				<td>
				{% if peopleFollowing %}
				{% else %}
				50	
				{% endif %}
				</td>
				
				<td>
				{% if popularVenues %}
				{% else %}
				Shotzi's
				{% endif %}
				</td>
				
				<td>
				{% if popularAreas %}
				{% else %}
				College Station, TX
				{% endif %}
				</td>
				
				<td>
				{% if otherArtists %}
				{% else %}
				The Conglomerate
				{% endif %}
				</td>
			</tr>
		</table>
		
	</div>
	<p>
	<div class="footer" style="height:8em;">
		<table border="0" cellpadding="5">
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/about/">About Us</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/faq/">FAQ</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/directory/artist">Artist directory</a></td>
			</tr>
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/team/">Team</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/terms/">Terms of Use</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/directory/venue/">Venue directory</a></td>
			</tr>
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/developer/">API</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/tour/">What is Band Together?</a></td>
			</tr>
		</table>
	<br>
	<img src="http://backup.physics.tamu.edu/media/bottomLogo.png" alt="Band Together" />
	</div>
</div>
</body>
</html>
